import React from "react";
import BaseScreen from "../BaseScreen";
import ProgressView from "../../view/ProgressView";
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../css/attendance.module.css";
import { locationTo } from "../../utils/LocationUtil";
import * as locations from '../../const/locations'
import { MyButton } from "../../view/MyButton";
import Config from "../../Config";
import { Debt, Common, Attend, AVATAR } from "../../const/imgs"
import { HintDialog } from '../../view/Dialog'
import { imgTest } from '../../const/datas'
import { dailyDetail } from '../../service/AttendService'
import ShowImgList from '../components/ShowImgs'
import { getTOKEN, getInfo } from "../../utils/StorageUtil";
import { getLocalTime, getPics, filterImgs2 } from '../../utils/CommomUtil'
class DailyDetail extends BaseScreen {
  constructor(props) {
    super(props)
    this.state = {
      detail: {},
      loading: false
    }
  }
  componentDidMount() {
    document.title = '日报'
    this.setState({ loading: true });
    dailyDetail({
      token: getTOKEN(),
      id: this.props.dailyId ? this.props.dailyId : getInfo('dailyId')
    })
      .then(
        res => {
          this.setState({ loading: false });
          if (res.error_code === 0) {
            this.setState(
              { detail: res.data }
            )
          }
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  render() {
    const {
      id,
      user_id,
      user_name,       // 用户名
      sex,                  // 用户性别
      company_id,
      org_id,
      date,          // 日期
      finish,     // 完成内容
      unfinish,          // 未完成内容
      need_coordinate,   // 需要协助内容
      attachment_json,     // 附件列表
      photo_json,          // 图片列表
      comment,        // 备注
      create_time,  // 创建时间
    } = this.state.detail
    return (
      <div className={styles["homes"]}>
        <div className={styles['attend_container']}>
          <div className={styles['stat_item_w']} style={{ height: '68px' }}>
            <div className={styles['record_info']}>
              <div className={styles['record_avatar']} style={{ width: '40px', height: '40px', borderRadius: '50%' }}>
                <img
                  src={parseInt(getInfo('UserInfo').sex) === 1 ? AVATAR.male : AVATAR.famale}
                  alt=''
                  style={{ width: '40px' }}
                />
              </div>
              <div>
                <div className={styles['stat_item_key']} style={{ fontSize: '15px', fontWeight: '600' }}>
                  {user_name}
                </div>
                {create_time && <div className={styles['stat_item_value']}>
                  {getLocalTime(create_time, 20)}
                </div>}
              </div>
            </div>
          </div>
        </div>
        <div className={styles['attend_container']}>
          <div className={styles['attend_item_w']} style={{ paddingBottom: '12px' }}>

            <DailyItem
              name='今日完成工作'
              content={finish}
            />
            <DailyItem
              name='今日未完成工作'
              content={unfinish}
            />
            <DailyItem
              name='需协调工作'
              content={need_coordinate}
            />
          </div>
        </div>
        {(photo_json !== undefined && photo_json.length > 10) && <div className={styles['attend_container']}>
          <div className={styles['stat_item_w']}>
            图片
          </div>
          <div className={styles['attend_item_w']}>
            <ShowImgList imgList={filterImgs2(JSON.parse(photo_json))} isAll={false} />
          </div>
        </div>}
        <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} />

      </div>
    )
  }
}
const DailyItem = ({ name, content }) => {
  return (
    <div>
      <div className={styles['stat_item_w']} style={{ padding: 0, height: '40px', fontWeight: '600' }} >
        {name}
      </div>
      {(content && content.length > 0) &&
        <div className={styles['stat_item_w']} style={textStyle}>
          {content}
        </div>
      }
    </div>
  )
}
const textStyle = {
  display: 'block',
  height: 'auto', color: Config.fontColor1,
  fontSize: '12px',
  lineHeight: '20px',
  color: "#9ea2ac",
  textIndent: '2rem',
  padding: 0,
}
const ApplyCell = ({ name, value, style }) => {
  return (
    <div className={styles['stat_item_w']}>
      <div className={styles['stat_item_borderBottom']}>

        <div className={styles['stat_item_key']}>
          {name}
        </div>
        <div className={styles['stat_item_value']}
          style={{ ...style }}
        >
          {value}
        </div>
      </div>
    </div>
  )
}
const ProgressItem = ({ selectedIndex, index }) => {
  return (
    <div className={styles['progress_item']}>
      <div className={styles['progress_line_wrapper']}>
        <div className={styles['progress_line_top']}
          style={{ background: index === '0' ? '#fff' : '' }}
        >
        </div>
        <div className={styles['progress_line_bottom']}>
        </div>
      </div>
      <div className={styles['progress_item_content']}>
        <div className={styles['stat_item']} style={{ padding: 0, marginLeft: '-30px' }}>
          <div className={styles['record_info']}>
            <div className={styles['record_avatar']} style={{ width: '30px', height: '30px', borderRadius: '50%' }}>
              <img src={imgTest[0].imgurl} alt=''
                style={{ width: '30px' }}
              />
            </div>
            <div className={styles['stat_item_key']}>
              发起申请
                </div>
          </div>
          <div className={styles['record_state']}>
            2018-05-12 12：00
            </div>
        </div>
      </div>
    </div>
  )
}
const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setDailyId(id) {
      let params = {
        dailyId: id,
      };
      dispatch(Actions.actionSetDailyId(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(DailyDetail);
// export default DailyDetail